<#import "../../home/index_layout.ftl" as layout />
<@layout.layout legend="Create a new account by filling in the fields bellow">
<div id="createAccountContainer" class="container-fluid">
	<div class="row-fluid">
		<div class="span5">
			<div class="well">
				<@form.form id="createNewUserForm" class="form" method="post" action="add"
				commandName="newUserDto">
				<div class="control-group">
					<@form.label class="control-label"
					path="firstName"><@spring.message code="createUser.form.label.firstName"/></@form.label>
					<div class="controls">
						<@form.input path="firstName"
						placeholder="...firstName" class="input-medium
						input-block-level"
						type="text" />
						<span class="text-error"><@form.errors id="firstNameErrorMsg" path="firstName"/></span>
					</div>
				</div>
				<div class="control-group">
					<@form.label class="control-label"
					path="lastName"><@spring.message code="createUser.form.label.lastName"/></@form.label>
					<div class="controls">
						<@form.input path="lastName"
						placeholder="...lastName" class="input-medium
						input-block-level"
						type="text" />
						<span class="text-error"><@form.errors id="lastNameErrorMsg" path="lastName"/></span>
					</div>
				</div>
				<div class="control-group">
					<@form.label class="control-label" path="email">
					<@spring.message code="createUser.form.label.email"/></@form.label>
					<div class="controls">
						<@form.input path="email" placeholder="...email"
						class="input-block-level pull-right input-medium" type="text" />
						<span class="text-error"><@form.errors id="emailErrorMsg" path="email"/></span>
					</div>
				</div>
				<div class="control-group">
					<@form.label class="control-label"
					path="password"><@spring.message code="createUser.form.label.password"/></@form.label>
					<div class="controls">
						<@form.input path="password"
						placeholder="...password"
						class="input-block-level
						pull-right input-medium"
						type="password" />
						<span class="text-error"><@form.errors id="passwordErrorMsg" path="password"/></span>
					</div>
				</div>
				<div class="control-group">
					<@form.label class="control-label" path="verifyPassword">
					<@spring.message code="createUser.form.label.verifyPassword"/></@form.label>
					<div class="controls">
						<@form.input path="verifyPassword"
						placeholder="...verify password"
						class="input-block-level
						pull-right input-medium"
						type="password" />
						<span class="text-error"><@form.errors id="verifyPasswordErrorMsg" path="verifyPassword"/></span>
					</div>
				</div>
				<button id="createAccountSubmitBtn" type="submit" class="btn pull-right btn-primary">Create</button>
				<a id="createAccountCancelBtn" class="btn" href="<@spring.url value="/index.html" />">Cancel</a>
				</@form.form>
			</div>
		</div
	</div
</div>
<script>
$(document).ready(function(){

	$('#createNewUserForm').validate({
	    rules: {
	      firstName: {
	        minlength: 2,
	        required: true,
			customNameValidator: true
	      },
	      lastName: {
	        minlength: 2,
	        required: true,
	        customNameValidator: true
	      },
	      email: {
	        required: true,
	        minlength: 5,
	        email: true,
	        remote: basePath + "/user/checkemail"
	      },
	      password: {
	      	minlength: 5,
	        required: true
	      },
	      verifyPassword: {
	        required: true,
	        equalTo: "#password"
	      }
	    },
	    messages: {
			firstName: {
				minlength: jQuery.format("Please enter at least {0} characters, accepted characters are letters, or the following special characters ' , - ."),
				required : "Enter your first name"
			},
			lastName:  {
				minlength: jQuery.format("Please enter at least {0} characters, accepted characters are letters, or the following special characters ' , - ."),
				required  : "Enter your last name"
			},
			email: {
				required: "Please enter a valid email address",
				minlength: "Please enter a valid email address",
				email: "Please enter a valid email address",
				remote: "This email is already in use"
			},
			password:  {
				required: "Provide a password",
				minlength: jQuery.format("Enter at least {0} characters"),
				maxlength: jQuery.format("Enter a maximum of {0} characters")
			},
			verifyPassword: {
				required: "Repeat your password",
				equalTo: "Enter the same password as above"
			}
		},
	    errorElement: "span",
	    errorClass: "text-error",
		highlight: function(element) {
			$(element).closest('.control-group').removeClass('success').addClass('error');
		},
		success: function(element) {
			element.closest('.control-group').removeClass('error').addClass('success');
		}
	});

	$.validator.addMethod("customNameValidator",
		function(value, element) {
        	return /^[A-Za-z]+[',-.]?$/.test(value);
        },
   		"Please enter at least 2 characters, accepted characters are letters, or the following special characters ' , - ."
   		);
	});

</script>
</@layout.layout>
